<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 自定义状态栏 -->
    <view class="bg-orange-500 h-[88rpx]"></view>
    
    <!-- 自定义导航栏 -->
    <view class="bg-orange-500 px-[32rpx] py-[24rpx]">
      <text class="text-[36rpx] font-bold text-white">奶茶外卖</text>
    </view>

    <!-- 顶部轮播图 -->
    <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#ff6b35" auto-play="3000">
      <nut-swiper-item v-for="(item, index) in banners" :key="index">
        <image 
          :src="item.image" 
          class="w-full h-[300rpx] object-cover"
          mode="aspectFill"
        />
      </nut-swiper-item>
    </nut-swiper>

    <!-- 分类导航 -->
    <view class="bg-white px-[32rpx] py-[32rpx] mt-[20rpx]">
      <view class="grid grid-cols-4 gap-[32rpx]">
        <view 
          v-for="category in categories" 
          :key="category.id"
          class="flex flex-col items-center cursor-pointer"
          @tap="onCategoryClick(category)"
        >
          <view class="w-[100rpx] h-[100rpx] bg-orange-100 rounded-[20rpx] flex items-center justify-center mb-[16rpx]">
            <image 
              :src="defaultProductImage" 
              class="w-[50rpx] h-[50rpx]"
              mode="aspectFit"
            />
          </view>
          <text class="text-[26rpx] text-gray-800">{{ category.name }}</text>
        </view>
      </view>
    </view>

    <!-- 推荐商品 -->
    <view class="bg-white px-[32rpx] py-[32rpx] mt-[20rpx]">
      <view class="flex justify-between items-center mb-[32rpx]">
        <text class="text-[36rpx] font-bold text-gray-800">热门推荐</text>
        <text class="text-[28rpx] text-gray-500">更多 ></text>
      </view>
      
      <view class="grid grid-cols-2 gap-[24rpx]">
        <view 
          v-for="product in recommendProducts" 
          :key="product.id"
          class="bg-white rounded-[16rpx] border border-gray-100 overflow-hidden"
          @tap="goToProductDetail(product)"
        >
          <image 
            :src="defaultProductImage" 
            class="w-full h-[240rpx] object-cover"
            mode="aspectFill"
          />
          <view class="p-[20rpx]">
            <text class="text-[28rpx] font-medium text-gray-800 block mb-[12rpx]">{{ product.name }}</text>
            <text class="text-[22rpx] text-gray-500 block mb-[16rpx] line-clamp-2">{{ product.description }}</text>
            <view class="flex justify-between items-center">
              <text class="text-[30rpx] font-bold text-red-500">¥{{ product.price }}</text>
              <nut-button 
                type="primary" 
                size="small"
                class="bg-orange-500 border-orange-500"
                @click.stop="addToCart(product)"
              >
                +
              </nut-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 全部商品 -->
    <view class="bg-white px-[32rpx] py-[32rpx] mt-[20rpx]">
      <view class="flex justify-between items-center mb-[32rpx]">
        <text class="text-[36rpx] font-bold text-gray-800">全部商品</text>
        <nut-button 
          type="default" 
          size="small"
          @click="toggleSortOrder"
        >
          价格{{ sortOrder === 'asc' ? '↑' : '↓' }}
        </nut-button>
      </view>
      
      <view class="space-y-[20rpx]">
        <view 
          v-for="product in sortedProducts" 
          :key="product.id"
          class="flex items-center bg-white rounded-[16rpx] border border-gray-100 overflow-hidden"
          @tap="goToProductDetail(product)"
        >
          <image 
            :src="defaultProductImage" 
            class="w-[140rpx] h-[140rpx] object-cover flex-shrink-0"
            mode="aspectFill"
          />
          <view class="flex-1 px-[24rpx] py-[20rpx]">
            <view class="flex justify-between items-start mb-[16rpx]">
              <view class="flex-1 mr-[16rpx]">
                <text class="text-[30rpx] font-medium text-gray-800 block mb-[8rpx]">{{ product.name }}</text>
                <text class="text-[24rpx] text-gray-500 line-clamp-2">{{ product.description }}</text>
              </view>
              <view class="text-right">
                <text class="text-[32rpx] font-bold text-red-500 block">¥{{ product.price }}</text>
                <nut-button 
                  type="primary" 
                  size="small"
                  class="bg-orange-500 border-orange-500 mt-[8rpx]"
                  @click.stop="addToCart(product)"
                >
                  +
                </nut-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部安全区域适配TabBar -->
    <view class="h-[200rpx]"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { useCartStore } from '@/stores/cart'

/**
 * 首页组件 - 展示奶茶商品列表和分类
 * 性能优化：使用v-for循环渲染列表，图片懒加载，防抖点击
 */

interface Banner {
  id: number
  image: string
  title: string
}

interface Category {
  id: number
  name: string
  icon: string
}

interface Product {
  id: number
  name: string
  description: string
  price: number
  image: string
  categoryId: number
  isRecommended: boolean
}

const cartStore = useCartStore()

// 响应式数据
const page = ref(0)
const sortOrder = ref<'asc' | 'desc'>('asc')
const defaultProductImage = 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'

// 轮播图数据
const banners = ref<Banner[]>([
  { id: 1, image: defaultProductImage, title: '夏日特饮' },
  { id: 2, image: defaultProductImage, title: '新品上市' },
  { id: 3, image: defaultProductImage, title: '限时优惠' }
])

// 分类数据
const categories = ref<Category[]>([
  { id: 1, name: '奶茶', icon: 'milk-tea' },
  { id: 2, name: '果汁', icon: 'juice' },
  { id: 3, name: '咖啡', icon: 'coffee' },
  { id: 4, name: '甜品', icon: 'dessert' }
])

// 商品数据
const products = ref<Product[]>([
  {
    id: 1,
    name: '珍珠奶茶',
    description: '经典珍珠奶茶，香浓顺滑，Q弹珍珠',
    price: 18,
    image: defaultProductImage,
    categoryId: 1,
    isRecommended: true
  },
  {
    id: 2,
    name: '芒果布丁奶茶',
    description: '新鲜芒果配布丁，口感丰富层次感强',
    price: 22,
    image: defaultProductImage,
    categoryId: 1,
    isRecommended: true
  },
  {
    id: 3,
    name: '草莓奶昔',
    description: '新鲜草莓打制，奶香浓郁，颜值超高',
    price: 25,
    image: defaultProductImage,
    categoryId: 2,
    isRecommended: false
  },
  {
    id: 4,
    name: '抹茶拿铁',
    description: '日式抹茶配牛奶，苦甜平衡，回味无穷',
    price: 28,
    image: defaultProductImage,
    categoryId: 3,
    isRecommended: true
  },
  {
    id: 5,
    name: '红豆双皮奶',
    description: '广式双皮奶配红豆，嫩滑香甜',
    price: 20,
    image: defaultProductImage,
    categoryId: 4,
    isRecommended: false
  },
  {
    id: 6,
    name: '柠檬蜂蜜茶',
    description: '清香柠檬配蜂蜜，酸甜解腻，夏日必备',
    price: 16,
    image: defaultProductImage,
    categoryId: 2,
    isRecommended: true
  }
])

// 计算属性
const recommendProducts = computed(() => 
  products.value.filter(product => product.isRecommended)
)

const sortedProducts = computed(() => {
  const sorted = [...products.value]
  return sorted.sort((a, b) => {
    return sortOrder.value === 'asc' ? a.price - b.price : b.price - a.price
  })
})

// 方法
const onCategoryClick = (category: Category) => {
  console.log('选择分类:', category.name)
  // 这里可以实现分类筛选逻辑
}

const goToProductDetail = (product: Product) => {
  console.log('跳转到商品详情:', product.name)
  Taro.navigateTo({
    url: `/pages/product-detail/index?id=${product.id}`
  })
}

const addToCart = (product: Product) => {
  cartStore.addToCart({
    id: product.id,
    name: product.name,
    price: product.price,
    image: product.image,
    quantity: 1
  })
  
  // 显示成功提示
  console.log('已添加到购物车:', product.name)
}

const toggleSortOrder = () => {
  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
}

// 生命周期
onMounted(() => {
  console.log('首页加载完成')
})
</script>

<style lang="scss" scoped>
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.space-y-24rpx > view:not(:first-child) {
  margin-top: 24rpx;
}

.cursor-pointer {
  cursor: pointer;
}
</style> 